class Awards extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            thumbpath: '',
            typename: '',
            description: '',
            goodsid: '',
            id: 0,
            counts: '',
            pagesize: 50,
            start: 0,
            pagestart: 0,
            counts: [],
        };
    }

    formatlist(list) {
        var listitem = [],wulist=[]
       
        
        if (list.length > 0) {
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                        <td><img  src={`${API_HEAD}imgs/` + x.thumbpath} alt="" id="img" className="masterimg" /></td>
                        <td>{x.typename}</td>
                        <td className="description"><p>{x.description}</p></td>
                        <td className="tconter">{x.orders}</td>
                        <td className="operatebox">
                            <div className='operate' id={"ope" + x.id}>
                                <div data-toggle="modal" data-target="#modalOne">
                                    <img src="./src/edit.png" />
                                    <p className='edit' onClick={this.todetail.bind(this, x.id)}>编辑</p>
                                </div>
                                
                                <div>
                                    <img src="./src/sort.png" />
                                    <p className="edit" onClick={this.toorder.bind(this, x.id)}>排序</p>
                                </div>
                                <div>
                                    <img src="./src/del.png" />
                                    <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                                </div>
                            
    
                            </div>
                        </td>
                    </tr>




                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据</p>
            )
        }
        this.setState({ listitem, list, originallist: list,wulist })
    }



    componentDidMount() {
        this.freshlist(0);
    }
    freshlist(start) {
        let { pagesize } = this.state;
        getawrad({ pagesize, start}, res => {
            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start,total:res.total })
                }
                this.formatlist(res.list);
            }
        })
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        console.log(e,'eeeee')
        let { start, pagesize,cid } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            this.freshlist(start)
        })
    }
    setpage(e){
        let {pagesize,cid,start}=this.state
        pagesize=parseInt(e)
        start=0
        // console.log(pagesize,'pagesizepagesizepagesize');
        this.setState({pagesize,start},()=>{
            this.freshlist(start)
        })
    }
    todetail(e) {
        window.location.href = "./addaward.html?id="+e;
    }
   
   
 
    add(){
        window.location.href = "./addaward.html";
    }
    // tosubcategory(id, name) {
    //     localStorage.setItem('categoryname', name);
    //     window.location.href = ('subcategory.html?id=' + id)

    // }
     // 排序
  toorder(id, cid) {
    let order = prompt("请输入1-999的正整数"), { start } = this.state
    if (order == "" || order == null) {
        return;
    }
    if (isNaN(order) || order < 1 || order > 999) {
        return;
    }
    order = Math.floor(order);
    let data = { id, order };
    awardsetorder(data, res => {
        if (res.issuccess == 1) {
            alert("设置成功");
            this.freshlist(start);
        }
    });

}
    // setcategoryorder(id) {
    //     let order = $("#" + id).val(), data;

    //     if (isNaN(order) || order < 1 || order > 999) {
    //         alert('请输入1-999的正整数');
    //         return;
    //     }
    //     order = Math.floor(order);
    //     data = { id, order };
    //     awardsetorder(data, res => {
    //         if (res.issuccess == 1) {
    //             alert("设置成功");
    //         }
    //     });
    //     this.freshlist();
    // }
    // goodchange(e) {
    //     // console.log(e.target.value)
    //     this.setState({ goodsid: e.target.value })
    // }
    // inputchange(e) {

    //     this.setState({ typename: e.target.value })
    // }
    // checkgoods() {
    //     $('#checkedLevel').multipleSelect({
    //         addTitle: true, //鼠标点悬停在下拉框时是否显示被选中的值
    //         selectAll: true, //是否显示全部复选框，默认显示
    //         selectAllText: "选择全部", //选择全部的复选框的text值
    //         allSelected: "全部", //全部选中后显示的值
    //     });

    //     $('#selectJcjb').multipleSelect("refresh");
    //     $('#selectJcjb').multipleSelect("close");
    //     // console.log($('.bottom '))
    //     //    var select = $('.selected input');
    //     //    var ids = [];
    //     //    select.map((x,i)=>{
    //     //        ids.push(i.value);
    //     //        console.log(x,ids);
    //     //        var a = ids.toString()
    //     //        this.setState({
    //     //            goodsid:a
    //     //        })
    //     //    })
    // }
    // oncategorychange(e) {
    //     //     console.log(e)
    //     //    this.checkgoods();
    //     var select = $('#select option');
    //     // console.log(select)
    //     var str = [];
    //     select.map((x, i) => {
    //         if (i.selected) {
    //             str.push(i.value)
    //         }
    //         var a = str.toString();
    //         //    console.log(a)
    //         this.setState({
    //             goodsid: a
    //         })
    //     })
    // }

    // changecheck(e) {
    //     var lis = [];
    //     var lls = [];
    //     var val = e.target.value;

    //     if ($('.check' + val).attr('checked', true)) {

    //         var id = $('.check' + val).attr('value');

    //     }



    // }
    // inputcode(e){
    //     this.setState({code:e.target.value})
    //     }
    // clickupload() {
    //     $('#file').click();
    // }
    // del_detail_img() {
    //     this.setState({ finishupload: !1, thumbpath: '' })
    // }
    // filechange(e) {
    //     var that = this;
    //     this.setState({
    //         finishupload: !1,
    //         uploadword: "上传"
    //     })
    //     var that = this;
    //     var filecode = this.state.filecode;
    //     // console.log(filecode,'filecode');
    //     var filedata = $('#file')[0].files[0];

    //     var reader = new FileReader();
    //     reader.readAsDataURL(filedata);
    //     reader.onload = function (e) {
    //         var thumbpath = e.target.result;
    //         that.setState({ thumbpath })
    //         //  that.putlistdata(filecode,[base64str])
    //     }
    // }
    // upload() {
    //     var that = this;
    //     var thumbpath = this.state.thumbpath;
    //     if (!isBase64(thumbpath)) {
    //         alert('请先选择图片')
    //         return;
    //     }
    //     uploadimg(thumbpath, res => {
    //         that.setState({
    //             finishupload: !0,
    //             thumbpath: `${res.path}`,
    //             pics: `${res.path}`
    //         })
    //         if (thumbpath.indexOf('http') == -1) {
    //             this.setState({
    //                 thumbpath: `${API_HEAD}imgs/` + `${res.path}`
    //             })

    //         }
    //     })

    // }
    // submit() {

    //     var { description, typename, thumbpath, finishupload, goodsid, pics } = this.state, err = '';

    //     if (!finishupload) err = '请先上传图片';
    //     if (typename.length == 0) err = '请填写分类名称';
    //     //   if(code.length==0) err='请填写分类编码';
    //     if (err.length > 0) {
    //         alert(err);
    //         return;
    //     }
    //     var data = { thumbpath: pics, typename, description, goodsid };

    //     if (Number(this.state.id) > 0) {
    //         data['id'] = this.state.id;
    //     }
    //     addaward(data, res => {
    //         if (res.issuccess == 1) {

    //             var text = Number(this.state.id) > 0 ? '修改成功' : '添加成功'
    //             alert(text)
    //             this.setState({
    //                 clicknew: !1,
    //                 finishupload: !1,
    //                 typename: '',
    //                 thumbpath: '',
    //                 description: "",
    //                 goodsid: ""
    //             })

    //             this.freshlist();

    //         }
    //     })
    // }
    // deschange(e, x) {
    //     var prop = "description"
    //     this.setState({
    //         [prop]: x.target.value
    //     })
    // }
    // edit(e) {
    //     var list = this.state.list;
    //     // console.log(list,e);
    //     var item = {};
    //     list.forEach(x => {
    //         // console.log(x)
    //         if (x.id == e) {
    //             this.setState({
    //                 id: x.id,
    //                 thumbpath: `${API_HEAD}imgs/` + x.thumbpath,
    //                 typename: x.typename,
    //                 description: x.description,
    //                 goodsid: x.goodsid,
    //                 clicknew: !0,
    //                 finishupload: !0,
    //                 pics: x.thumbpath
    //             })
    //         }
    //     });
    // }

      // 删除
    del(e) {
        this.setState({ delid: e}, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        delsawards( delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            } else {
                $('#myModal').modal('toggle');
                alert(res.msg);
            }
        })
    }


    render() {
        let { listitem, counts, pagestart,wulist } = this.state;
        return (
            <div className="breadLinebox">

                <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />
                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            {/* <img src={Constant.LEFTMENU_ORDER} /> */}
                            当前位置 > 大奖作品管理
                        </div>
                    </div>
                    <div className="content">
                        {/* <p >大奖作品管理</p> */}


                        <div className="tabletit">

                            <p className="add" data-toggle="modal" data-target="#modalOne" onClick={this.add.bind(this)}>新建</p>
                        </div>


                        
                        <table className="tab">
                            <thead>
                                <tr>
                                    <th className="awardimage">大奖作品图片</th>
                                    <th>大奖作品名称</th>
                                    <th className="">大奖作品描述</th>
                                    <th className="tconter">排序</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {listitem}
                            </tbody>
                        </table>
                        {wulist}
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <LeftMenu code='award' />
        <Awards />
    </div>
    , $('.container')[0]
)